<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="分类">
                <div class="common-layout">
                    <el-container>
                        <el-aside width="200px">
                            <!-- 侧栏开始 -->
                            <el-row class="tac" style="width: 100px;">
                                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                    @close="handleClose">
                                    <el-menu-item index="1">
                                        <span>注塑</span>
                                    </el-menu-item>
                                    <el-menu-item index="2">
                                        <span>机加工</span>
                                    </el-menu-item>
                                    <el-menu-item index="3">
                                        <span>组装</span>
                                    </el-menu-item>
                                    <el-menu-item index="4">
                                        <span>仓库</span>
                                    </el-menu-item>
                                    <el-menu-item index="5">
                                        <span>后整理</span>
                                    </el-menu-item>
                                </el-menu>

                            </el-row>
                            <!-- 侧栏结束 -->
                        </el-aside>

                        <el-main>
                            <el-calendar v-model="value">
                                <template #date-cell="{ data }">
                                    {{ data.day.split('-').slice(1).join('-') }}
                                    <p :class="data.isSelected ? 'is-selected' : ''">
                                        {{ data.isSelected ? this.day : '班' }}
                                    </p>
                                </template>
                            </el-calendar>
                        </el-main>
                    </el-container>
                </div>
            </el-tab-pane>
            <el-tab-pane label="班组">
                <div class="common-layout">
                    <el-container>
                        <el-aside width="200px">
                            <!-- 侧栏开始 -->
                            <el-row class="tac" style="width: 100px;">
                                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                                    @close="handleClose">
                                    <el-menu-item index="1">
                                        <span>组装A</span>
                                    </el-menu-item>
                                </el-menu>

                            </el-row>
                            <!-- 侧栏结束 -->
                        </el-aside>

                        <el-main>
                            <el-calendar v-model="value">
                                <template #date-cell="{ data }">
                                    {{ data.day.split('-').slice(1).join('-') }}
                                    <p :class="data.isSelected ? 'is-selected' : ''">
                                        {{ data.isSelected ? this.day : '班' }}
                                    </p>
                                </template>
                            </el-calendar>
                        </el-main>
                    </el-container>
                </div>
            </el-tab-pane>
            <el-tab-pane label="个人">
                <!--  搜索栏开始 -->
                <el-form style="margin-top: 15px;" :inline="true" :model="calUser" class="demo-form-inline">
                    <el-form-item label="人员">
                        <el-input v-model="calUser.userName" placeholder="请选择查询的人员" clearable />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="sortCalPlans"><el-icon>
                                <Search />
                            </el-icon>搜索</el-button>
                        <el-button @click="clearCalPlan"><el-icon>
                                <Refresh />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
                <!--  搜索栏结束 -->

                <el-calendar v-model="value">
                    <template #date-cell="{ data }">
                        {{ data.day.split('-').slice(1).join('-') }}
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.isSelected ? this.day : '班' }}
                        </p>
                    </template>
                </el-calendar>

            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: new Date(),
            calendarValue: null,
            calUser: {},
            day:'休',
        };
    },
    watch: {
        value: function () {
            var year = this.value.getFullYear();
            var month = this.value.getMonth() + 1;
            var date = this.value.getDate()
            if (date >= 1 && date <= 9) {//日如果小于10就补个0
                date = "0" + date;
            }
            if (month >= 1 && month <= 9) {//月如果小于10就补个0
                month = "0" + month;
            }
            console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
            this.calendarValue = year + "-" + month + "-" + date;
            console.log("---------" + this.calendarValue);
            //this.getCalendarList()   //  调用接口，把拼接好的参数传到后台
        }
    },
    methods: {
        getCalendarList() {

        },
    },
    mounted() {
        this.$nextTick(() => {
            // 更改element原生日历组件中按钮文字为上个月
            let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)>span');
            prevBtn.innerHTML = '上个月';
        }),
            this.$nextTick(() => {
                // 更改element原生日历组件中按钮文字为今天
                let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)>span');
                prevBtn.innerHTML = '今天';
            }),
            this.$nextTick(() => {
                // 更改element原生日历组件中按钮文字为下个月
                let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)>span');
                prevBtn.innerHTML = '下个月';
            })
    }
};
</script>

<style scoped></style>